<template>
  <div>
    <div class="select-operator">
      <a-button @click="handleAdd" type="primary" size="small" >新增</a-button>
      <slot></slot>
    </div>
    <div class="select-wrap">
      <select-item v-for="(item, index) in records" :key="item.id" 
        @view="(item) => { $refs.viewFence.show(item.shapeType, item.center, item.area) }" 
        @select="(item) => { $emit('select', item) }" 
        :item="item"></select-item>
    </div>
    <view-fence ref="viewFence"></view-fence>
    <rental-fence-modal ref="modalForm"></rental-fence-modal>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
const list = "/rental/fence/list";
import SelectItem from './SelectItem.vue'
import View from './View.vue'
import RentalFenceModal from '@/views/rental/fence/modules/RentalFenceModal'
export default {
  name: 'Select',
  components: {
    SelectItem,
    ViewFence : View,
    RentalFenceModal
  },
  data() {
    return {
      selectedItem: this.value,
      records: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData(params) {
      getAction(list, params).then((res) => {
        if (res.success) {
          const records = res.result.records;
          const total = res.result.total;
          const pageNo = res.result.current;
          console.log("loadData-----------:", total, pageNo, records);
          //基于上面的信息实现分页功能
          this.records = this.records.concat(records);
          this.total = total;
          this.pageNo = pageNo;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    handleAdd() {
      this.$refs.modalForm.add();
      this.$refs.modalForm.title = this.$t("common.add");
      this.$refs.modalForm.disableSubmit = false;
    },
  }
}
</script>

<style lang="less" scoped>
.select-operator{
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
.select-wrap{
  width: 100%;
  height: calc(100vh - 130px);
  padding: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
</style>